
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


  <title>Styles | Simple Life</title>

  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta name="author" content="fullahead.org" />
  <meta name="keywords" content="XHTML, CSS, template, FullAhead" />
  <meta name="description" content="A valid, XHTML 1.0 template" />
  <meta name="robots" content="index, follow, noarchive" />
  <meta name="googlebot" content="noarchive" />

  <link rel="stylesheet" type="text/css" href="../style/html.css" media="screen, projection, tv " />
  <link rel="stylesheet" type="text/css" href="../style/layout.css" media="screen, projection, tv" />
  <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" />

  <!-- Conditional comment to apply opacity fix for IE #content background.
       Invalid CSS, but can be removed without harming design -->
  <!--[if gt IE 5]>
  <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection, tv " />
  <![endif]-->

</head>


<body>

<!-- #wrapper: centers the content and sets the width -->
<div id="wrapper">

  <!-- #content: applies the white, dropshadow background -->
  <div id="content">

    <!-- #header: holds site title and subtitle -->
    <div id="header">
      <h1><span class="big darkBrown">S</span>imple <span class="big darkBrown">L</span>ife</h1>
      <h2><span class="highlight">Because sometimes you don't need a sidebar</span></h2>
    </div>



    <!-- #menu: topbar menu of the site.  Use the helper classes .two, .three, .four and .five to set
                the widths for 2, 3, 4 and 5 item menus. -->
    <ul id="menu" class="four">
      <li><a href="index.html" title="An intro to Simple Life"><span class="big">I</span>ntro</a></li>
      <li><a href="coding.html" title="Coding tips"><span class="big">C</span>oding</a></li>
      <li><a href="styles.html" title="See the tags in action" class="here"><span class="big">S</span>tyles</a></li>
      <li><a href="http://fullahead.org/contact.html" title="Get in touch"><span class="big">C</span>ontact</a></li>
    </ul>

    <!-- #page: holds all page content, as well as footer -->
    <div id="page">

      <h1>Styles</h1>

      <p>
        Here you can see the different HTML tags that come styled with this template.  To learn some trick about the template, see the <a href="coding.html" title="Read about coding tips">coding</a> page.
      </p>

      <h1>Heading 1</h1>

      <h2>Heading 2</h2>

      <h3>Heading 3</h3>

      <h4>Heading 4</h4>


      <p>
        A <a href="http://tastydrop.com" title="Shameless....">link</a>, <acronym title="this really isn't a very good description">acronym</acronym>, <b class="highlight">highlight</b> and <del>deleted text</del>.
      </p>

      <blockquote>
        <p>
          This is a blockquote with author information included.  If you look at the source, you can see the author info gets its style from a combination of generic classes.<span class="block small green"><a href="http://fullahead.org/contact.html" title="Contact snop">snop</a> on March 19th, 2006</span>
        </p>
      </blockquote>


      <code><span class="green">/* Code block */</span><br/>System.out.println("someone set us up the bomb");</code>


      <ul>
        <li>Unordered List</li>
        <li>Uses a custom bullet to make items pop</li>
      </ul>


      <ol>
        <li><span>Ordered List</span></li>
        <li><span>Uses a &lt;span&gt; tag to style the numbers</span></li>
      </ol>


      <h1>Big Links</h1>

      <ul class="bigLinks">
        <li>
          <a href="">
            <span class="title">Link One</span>
            <span class="desc">A bit of descriptive text never hurt</span>
          </a>
        </li>
        <li>
          <a href="">
            <span class="title">Link Two</span>
            <span class="desc">Because everybody loves large, clickable areas.</span>
          </a>
        </li>
        <li>
          <a href="">
            <span class="title">Link the Third</span>
            <span class="desc">Goodness....I've run out of things to type.  I guess some latin would do: Lorem ipsum dolor sit amet, consectetuer adipiscing...</span>
          </a>
        </li>
      </ul>




      <h1>Tables</h1>

      <table>

        <caption>
          Table Caption: A description could go here
        </caption>

        <thead>
          <tr>
            <th class="width30">Application</th>
            <th>Description</th>
            <th class="width10 aCenter">Version</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Product Name</td>
            <td>Some Description text</td>
            <td class="alignRight">1.0</td>
          </tr>
          <tr class="dark">
            <td>Different Product Name</td>
            <td>Some Longer Description text that wraps around to show vertical alignment</td>
            <td class="alignRight">2.0</td>
          </tr>
          <tr>
            <td>Product Name</td>
            <td>Some Description text</td>
            <td class="alignRight">3.0</td>
          </tr>
        </tbody>

      </table>


      <h1>Forms</h1>


      <form id="dummy" action="" method="post">

        <p>
          <label>Select Label</label>
          <select name="dummy2">
            <option value="1">Ottawa</option>
            <option value="2">Calgary</option>
            <option value="3">Moosejaw</option>
          </select>
        </p>

        <p>
          <label>Field Label</label>
          <input type="text" name="dummy1" class="width50"/>
        </p>

        <p>
          <label>Textarea Label</label>
          <textarea name="dummy3" rows="5" cols="20" class="width50"></textarea>
        </p>

        <p>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="button"/>
          <input type="reset" value="Reset" class="button"/>
        </p>

      </form>

      <a name="widthDemo"></a>
      <h1>Width Demo</h1>



      <h2 class="clear">50 Percent Width</h2>

      <div class="width50 floatLeft">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
        </p>
      </div>

      <div class="width50 floatRight">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
        </p>
      </div>



      <h2 class="clear">66 Percent Width</h2>

      <div class="width66 floatLeft">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.
        </p>
      </div>

      <div class="width33 floatRight greenBg">
        <p>
          Use the <i>.greenBg</i> class to highlight content you don't want people to miss.
        </p>
      </div>


      <!-- .footer: the site footer text, links and whatever else -->
      <p class="footer clear">
        Design by <a href="http://fullahead.org" title="Visit FullAhead">FullAhead</a>.  Valid CSS &amp; XHTML with no rights reserved.
      </p>

    </div>

  </div>

</div>

</body>

</html>